<template >
  <!-- 通行统计 -->
  <div class="data">
    <ul class="stop_list">
      <li class="on_stop">
        <div class="mark_stop icon_person_number">

        </div>
        <div class="text_box">
          <p class="text_name">在园人数</p>
          <b class="text_number">176</b>
        </div>
      </li>
      <li class="on_stop">
        <div class="mark_stop icon_person_today">
        </div>
        <div class="text_box">
          <p class="text_name " >今日访客</p>
          <b class="text_number">3</b>
        </div>
      </li>
    </ul>
    <ul class="stop_list">
      <li class="on_stop">
        <div class="mark_stop in_park">
        </div>
        <div class="text_box">
          <p class="text_name">进场人次</p>
          <b class="text_number">236</b>
        </div>
      </li>
      <li class="on_stop">
        <div class="mark_stop out_park">
        </div>
        <div class="text_box">
          <p class="text_name">出场人次</p>
          <b class="text_number">236</b>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {

data() {
  return {

} 
},
created(){

},
methods:{
},
activated() {
},
}
</script>

<style scoped lang="less">
@import '../../../../assets/css/chuShiHua.less';
@img:'/static/img/park/home/';
.main{
width: calc((100% - 2vw) * 0.24);
height: calc(((92% - 2vh)  * 0.95 * 0.32) - 4vh );
background: #050505;
margin: 50px;
padding: 1vh 1vw;
}

.data{
.WH();
.sum_stop{
.WH(100%,50%);
display: flex;
align-items: center;
.text_number{
  margin-left: 15%;
}
}
.stop_list{
.WH(100%,50%);
display: flex;
align-items: center;
justify-content: space-between;
.on_stop{
  .WH(50%,100%);
  display: flex;
  align-items: center;
  .mark_stop{
    margin-left: 10%;
  }
}
}
}
.mark_stop{
  width: 4vmin;
  height: 4vmin;
  margin-left: 5%;
  opacity: 1;
  display: flex;
  justify-content: center;
  color:  #87CDFF;
  font-weight: 600;
  font-size: 28px;
}
.text_name{
font-size: 20px;
font-weight: 600;
color: #FFFFFF;
line-height: 23px;
letter-spacing: 1px;
padding: 0 5%;
}
.text_number{
font-size: 24px;
font-weight: 600;
color: #B0E0FF;
line-height: 28px;
letter-spacing: 1px;
}

.text_box{
.WH(50%,4vmin);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.text_name{
font-size: 16px;
}
.text_number{
font-size: 20px;
}
}
.used{
height: 85%;
border-bottom: 2px solid #86cbfd;
}
.un_used{
height: 85%;
border-bottom: 2px dashed #86cbfd;
border-spacing: 10%;
}
//icon图标
@img:'/static/img/park/home/';
.icon_person_number{
  .backgroundImg('@{img}/icon_person_number.webp',120%);
}
.icon_person_today{
  .backgroundImg('@{img}/icon_person_today.webp',120%);
}
.in_park{
  .backgroundImg('@{img}/in_park.webp',120%);
}
.out_park{
  .backgroundImg('@{img}/out_park.webp',120%);
}

</style>